<template>
  <div class="AAA_module">
    <module-header
      :title="title"
      :meter="meter"
      :params="{
        module: 'AAB',
        Born,
        Id: selectRecordId,
        status: selectRecordStatus
      }"
    />
    <section class="main">
      <task-tab class="main-content" :settings="main_settings" />
      <!-- <el-button size="mini" type="primary">读取数据</el-button> -->
    </section>
    <section class="settings">
      <SecondPanel
        ref="panel"
        :records="records"
        :limits="init_button_limit"
        :disabled="selectRecordId === ''"
      />
    </section>
    <section class="table">
      <record-table
        title="反射声延时记录表"
        procedure="AAB"
        :meter="meter"
        :params="{
          title,
          Cutting: ''
        }"
        :limits="RecordTableLimit"
        :tableColumnDict="tableColumnDict"
        :tableData="tableData"
        @onRecordSelect="onRecordSelect"
        @onRecordStore="onRecordStore"
        @onRecordDelete="onRecordDelete"
      />
    </section>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Getter } from 'vuex-class'
import { Component, Prop, Ref } from 'vue-property-decorator'
import { Dictionary } from '@/interface/Basic'
import { AxiosResponse } from 'axios'
import ModuleHeader from '@/components/basic/ModuleHeader.vue'
import RecordTable from '@/components/basic/RecordTable.vue'
import TaskTab from '@/views/dashboard/compoents/TaskTab.vue'
import SecondPanel from '../AAA/components/SecondPanel.vue'
import { formatTime } from '@/utils/specificFunc'
import { GetProcedureRecordData, UpdateProcedureRecord } from '@/api/procedure'
import { tableColumnDict, main_settings } from '../AAA/utils/params'
import { GetInitialParams, GenerateCurPageLimits, FillInTaskTabData } from '@/utils/precedure'
@Component({
  components: {
    ModuleHeader,
    RecordTable,
    TaskTab,
    SecondPanel
  }
})
class NoneStandard extends Vue {
  @Getter('name') username!: string
  @Ref() panel!: { CaptureTotalParams: () => Dictionary<string> }
  @Prop() status!: string
  @Prop({ default: '' }) meter!: string
  @Prop({ required: true }) title!: string
  // main
  main_settings = main_settings
  // settings
  records: Dictionary<string> = {}
  // tabs
  tableColumnDict = tableColumnDict
  tableData: Dictionary<string>[] = []
  // record table
  selectRecordId: string = ''
  selectRecordStatus: string = ''
  init_button_limit: Dictionary<boolean> = {
    // 保存
    AAB_0: false,
    // 计算
    AAB_1: true,
    // 导入数据
    AAB_2: true,
    // 新建
    AAB_4: true,
    // 删除
    AAB_5: false
  }
  get Born() {
    const res = this.main_settings.find(item => item.key === 'AAF701')
    if (!res) return ''
    return res.value
  }
  get RecordTableLimit(): Dictionary<boolean> {
    const { AAB_0, AAB_4, AAB_5 } = this.init_button_limit
    return {
      Store: AAB_0,
      Create: AAB_4,
      Delete: AAB_5
    }
  }
  mounted() {
    this.initDashboardParams()
  }
  initDashboardParams() {
    const main_params: Dictionary<string> = {
      AAF001: '',
      AAF1301: '',
      AAF701: ''
    }
    GetInitialParams(this.meter, main_params).then(res => {
      const { params } = res
      this.main_settings = FillInTaskTabData(main_settings, params)
    })
  }
  initButtonsLimit(limits: string) {
    GenerateCurPageLimits(limits, 'AAB', this.init_button_limit).then(limit => {
      this.init_button_limit = limit
    })
  }
  onRecordSelect(data: Dictionary<string>) {
    const { id, status, DatabaseLabel } = data
    this.selectRecordId = id
    this.selectRecordStatus = status
    GetProcedureRecordData({ id, DatabaseLabel }).then(
      (res: AxiosResponse<{ ReturnData: Dictionary<string> }>) => {
        const { ReturnData } = res.data
        this.records = ReturnData
        this.initButtonsLimit(ReturnData.AAB002)
      }
    )
  }
  onRecordStore(params: Dictionary<string>) {
    if (params.DatabaseLabel !== 'AAB') return
    if (!params.id) {
      this.$message({
        type: 'warning',
        message: '未选中id，无法保存'
      })
      return
    }
    const params_AAA: Dictionary<string> = { Process: this.title }
    const Details = this.panel.CaptureTotalParams()
    Details.AAB801 = this.username
    Details.AAB901 = formatTime(new Date().getTime(), 'YYYY-MM-DD-hh-mm-ss')
    Details.AAB1701 = params_AAA.Process
    Details.AAB1801 = params.Status
    const total_params = { ...params, ...params_AAA, ...{ Details } }
    UpdateProcedureRecord(total_params).then((res: AxiosResponse<{ Message: string }>) => {
      this.$message({
        type: 'success',
        message: res.data.Message
      })
      // this.selectRecordId = ''
      // this.selectRecordStatus = ''
      this.$broadEmit('onRecordStoreSucceed', { procedure: this.title })
    })
  }
  onRecordDelete() {
    this.selectRecordId = ''
    this.selectRecordStatus = ''
  }
}
export default NoneStandard
</script>

<style lang="less" scoped>
@import '~@/styles/theme.less';
@import '~@/styles/layout.less';
.AAA_module {
  box-sizing: border-box;
  padding: 20px;
  width: 100%;
  height: 100%;
  #flex(column, flex-start, flex-start);
  section {
    box-sizing: border-box;
    padding: 10px;
    width: 100%;
    margin-bottom: 20px;
    border-radius: 5px;
    #color(background-color, --module-bg-color);
    #shadow-color(0, 2px, 12px, 0, --primary-shadow-color);
  }
  .main,
  .main > .buttons {
    #flex(row, center, space-between);
  }
  .settings {
    flex: 1;
    /deep/.el-tabs {
      .el-tabs__content {
        #pane-first {
          height: 350px;
        }
      }
    }
  }
  .table {
    flex: 1;
    margin-bottom: 0;
    max-height: 300px;
    .el-table {
      height: 100%;
    }
  }
}
</style>
